<template>
	<div class="layout-container">
		<!-- 头部导航 -->
		<header class="header" v-if="showHeader">
			<div class="header-content">
				<!-- Logo 区域 -->
				<div class="logo-section">
					<img
						src="~/assets/images/logo.svg"
						alt="TATA树洞"
						class="logo-image"
					/>
				</div>

				<!-- 导航菜单 -->
				<nav class="nav-menu" v-if="userInfo">
					<!-- 用户问候 -->
					<div class="user-greeting">
						<span class="greeting-text">你好呀，</span>
						<span class="user-name">{{ userInfo.name }}</span>
					</div>

					<!-- 按钮组 -->
					<div class="menu-buttons">
						<!-- 心理测量表按钮 -->
						<div
							class="menu-btn"
							:class="{ active: isQuizPage }"
							@click="goToQuiz"
						>
							心理测量表
						</div>

						<!-- 报告查询 -->
						<div
							class="menu-btn"
							:class="{ active: isReportPage }"
							@click="goToReport"
						>
							报告查询
						</div>
					</div>

					<!-- 退出登录 -->
					<div class="logout-section" @click="handleLogout">
						<span class="logout-text">退出登录</span>
						<el-icon class="logout-icon">
							<Right />
						</el-icon>
					</div>
				</nav>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<main class="main-content">
			<slot />
		</main>

		<!-- 底部 -->
		<footer class="footer" v-if="showFooter">
			<p>&copy; 2024 TaTa树洞 - 让TaTa陪你，走过成长中的四季心情</p>
		</footer>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Right } from '@element-plus/icons-vue'

interface UserInfo {
	name: string
	school: string
	class: string
	studentId: string
}

// 响应式数据
const userInfo = ref<UserInfo | null>(null)
const route = useRoute()
const router = useRouter()

// 计算属性 - 是否显示头部和底部
const showHeader = computed(() => {
	return route.path !== '/'
})

const showFooter = computed(() => {
	return route.path !== '/'
})

// 计算属性 - 判断当前页面
const isQuizPage = computed(() => {
	return route.path === '/quiz'
})

const isReportPage = computed(() => {
	return route.path === '/report'
})

// 方法
const goToQuiz = () => {
	router.push('/quiz')
}

const goToReport = () => {
	router.push('/report')
}

const handleLogout = () => {
	ElMessage.success('已退出登录')
	userInfo.value = null
	localStorage.removeItem('userInfo')
	router.push('/')
}

// 生命周期
onMounted(() => {
	// 从本地存储获取用户信息
	const savedUserInfo = localStorage.getItem('userInfo')
	if (savedUserInfo) {
		userInfo.value = JSON.parse(savedUserInfo)
	}
})
</script>

<style scoped>
.layout-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 头部导航 */
.header {
	background: #9ebd6f;
	color: white;
	padding: 30px 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-content {
	max-width: 1540px;
	margin: 0 auto;
	padding: 0 94px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

/* Logo 区域 */
.logo-section {
	flex-shrink: 0;
}

.logo-image {
	width: 140px;
	height: auto;
	display: block;
}

/* 导航菜单 */
.nav-menu {
	display: flex;
	align-items: center;
	gap: 80px;
}

/* 用户问候 */
.user-greeting {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.greeting-text {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	line-height: 18.2px;
}

.user-name {
	font-size: 18px;
	font-weight: 600;
	color: #434b36;
	line-height: 18.2px;
}

/* 按钮组 */
.menu-buttons {
	display: flex;
	align-items: center;
	gap: 30px;
}

/* 菜单按钮 */
.menu-btn {
	height: 29px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 30px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.2px;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
	background-color: transparent;
	white-space: nowrap;
}

.menu-btn:hover {
	opacity: 0.8;
}

/* 激活状态 */
.menu-btn.active {
	background-color: #434b36;
}

.menu-btn.active:hover {
	background-color: #5a6247;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(67, 75, 54, 0.3);
	opacity: 1;
}

/* 退出登录 */
.logout-section {
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.logout-section:hover {
	opacity: 0.8;
}

.logout-text {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.2px;
	color: #ffffff;
}

.logout-icon {
	width: 20px;
	height: 20px;
	color: #ffffff;
}

/* 主要内容 */
.main-content {
	flex: 1;
	padding: 0;
	width: 100%;
}

/* 底部 */
.footer {
	background: #f5f7fa;
	text-align: center;
	padding: 20px;
	color: #666;
	border-top: 1px solid #e4e7ed;
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.header-content {
		padding: 0 40px;
	}

	.nav-menu {
		gap: 40px;
	}
}

@media (max-width: 768px) {
	.header-content {
		padding: 0 20px;
		flex-direction: column;
		gap: 16px;
	}

	.nav-menu {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}

	.menu-buttons {
		gap: 20px;
	}

	.logo-image {
		width: 100px;
	}
}

@media (max-width: 480px) {
	.header-content {
		padding: 0 16px;
	}

	.logo-image {
		width: 80px;
	}

	.nav-menu {
		gap: 16px;
	}

	.menu-buttons {
		flex-direction: column;
		gap: 12px;
	}
}
</style>
